<template>
  <div>
    <div id="emoji" @mouseenter="show=true" @mouseleave="show=false">
      <span> &#x1F600;</span>
      <div id="emojis" v-show="show">
        <span v-for="(e,index) in list" :key="index" v-html="getEmoji(e)" @click="append(e)">
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import {emojis} from "@/util/emoji";
import {mapState} from "vuex";

export default {
  name: "emoji",
  data() {
    return {
      show: false,
      list: emojis
    }
  },
  computed: {
    ...mapState(['uploadFocus']),
  },
  methods: {
    getEmoji(char) {
      return '&#' + char + ';'
    },
    append(c) {
      this.$bus.$emit('appendEmoji', this.uploadFocus, String.fromCodePoint(c))
    }
  }
}
</script>

<style scoped>
#emoji {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#emoji > span {
  position: absolute;
}

span {
  display: inline-block;
  font-size: 25px;
  width: 32px;
  height: 32px;
  cursor: default;
}

#emojis {
  position: absolute;
  left: 110px;
  border: lightgray 1px solid;
  border-radius: 10px;
  width: 400px;
  height: 400px;
  overflow: hidden scroll;
  scrollbar-width: none;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#emojis span:hover {
  background-color: #e3e6ec;
}
</style>